<template>
  <div class="h100">
    <div class="sup-top" @click="gohome()">
      <img src="~@/assets/reception/logo.png" />
    </div>
    <div class="sup-bac">
      <img src="~@/assets/reception/supermarket/backgronud.png" alt="" >
    </div>
    <div class="sup-main container">
      <div class="a-df">
        <div class="a-df" style="margin: 0 auto;">
          <span class="sup-title">
            <span>商品超市</span>
          </span>
        </div>
      </div>
      <div class="a-df">
        <div>
          <div class="sup-search">
            <span class="sup-search-title">商品搜索</span>
            <a-input-search placeholder="" size="large" @search="onSearch">
              <a-button slot="enterButton">
                搜索
              </a-button>
            </a-input-search>
          </div>
          <div class="sup-list">
            <span class="sup-list-title">商品分类</span>
            <div class="sup-list-category" v-for="(item,index) in supList" :key="index">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="sup-list-class">
          <span class="sup-class-title" >近期热门推荐</span>
          <div class="sup-class-item" @click="routerpush()">
            <img  src="~@/assets/reception/supermarket/commodity.png" alt="" >
          </div>
        </div>
      </div>


    </div>
    <div class="sup-bac-bottom">
      <img src="~@/assets/reception/background2.png" alt="" >
    </div>
  </div>
</template>

<script>
export default {
  name: 'receptionHome',
  data () {
    return {
      supList:[
        {
          name:'安全防护',
        },
        {
          name:'化工橡胶',
        },
        {
          name:'电工电气',
        },
        {
          name:'电子仪表',
        },
        {
          name:'五金工具',
        },
        {
          name:'机器设备',
        },
        {
          name:'行业设备',
        },
        {
          name:'新能源',
        },
      ]
    }
  },
  methods: {
    displayContent(text) {
      if ( text <= 100) {
        return text;
      }
      return text.substring(0, 100) + '...';
    },
    routerpush(){
      this.$router.push({ path: '/reception/supermarket/detail/item' });
    },
    gohome() {
      this.$router.push({ path: '/reception/home/index' });
    },
    rollback(){
      this.flipped = !this.flipped
    }
    // flipCard(index){
    //   this.flipped = !this.flipped
    // }
  },
}
</script>

<style lang="less" scoped >
.sup-top{
  height: 60px;
  background: #fff;
  padding: 10px 100px ;
  cursor: pointer;
  img{
    height: 40px;
    display: block;
  }
}
.sup-bac{
  img{
    height: 330px;
    width: 100%;
  }
}
.sup-main{
  margin-top:30px ;
  .sup-list-class{
      margin: 0 20px;
      width: 100%;
      .sup-class-title{
        display: block;
        margin: 0 20px;
        color: #000;
        font-size: 20px;
        padding-bottom:10px ;
        width: 100%;
        border-bottom: 2px solid #d2d2d2;
      }
      .sup-class-item{
        cursor: pointer;
        img{
          // width: 200px;
          // height: 200px;
        }
      }
    }
  .functional-module{
    width: 130px;
    margin-top:10px ;
    display: flex;
    flex-direction:column;
    position: absolute;
    left: 10px;
    img{
      margin: 5px 0;
      // height: 95px;
      cursor: pointer;
    }
  }
    .sup-title{
      color: #2555b0;
      font-size:24px ;
      display: block;
      line-height: 30px;
      margin: 0 10px;
      display: flex;
      flex-direction: column;
    }
    .sup-search{
      width: 300px;
      background: #ededed;
      height: 130px;
      padding: 0 20px;
      .sup-search-title{
        display: block;
        background: #486dee;
        color: #fff;
        text-align: center;
        line-height: 50px;
        margin-left:-20px ;
        font-size: 24px;
        width: calc(100% + 40px);
        height: 50px;
        margin-bottom: 20px;
      }
      .ant-input-group{
        margin: 0 20px;
      }
    }
    .sup-list{
      width: 300px;
      background: #ededed;
      height: 530px;
      margin: 20px 0;
      padding: 0 20px;
      .sup-list-title{
        display: block;
        background: #486dee;
        color: #fff;
        text-align: center;
        line-height: 50px;
        margin-left:-20px ;
        font-size: 24px;
        width: calc(100% + 40px);
        height: 50px;
        margin-bottom: 20px;
      }
      .sup-list-category{
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        color: #000;
        border-bottom:dashed 2px #000;
        cursor: pointer;
      }
    }
    
}
.sup-bac-bottom{
  // position: absolute;
  // bottom: -400px;
  width: 100%;
  img{
    height: 180px;
    width: 100%;
  }
}

</style>